<template>
  <div id="hosthome">
    <div class="fs_header white text-center font16">
        梵舍管家
    </div> 
      
    <router-view></router-view>
    
    <ul class="fs_footer"  >
    <li @click="handleChange('forwardRoom')" value="forwardRoom" :class="{isact:hostbottomNav=='forwardRoom' }">远期房态</li>
    <li @click="handleChange('roomlist')" value="roomlist"  :class="{isact:hostbottomNav=='roomlist' }" >管家日历</li>
    <li @click="handleChange('myself')" value="myself"  :class="{isact:hostbottomNav=='myself' }">我</li>
    </ul> 
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'

    export default {
        name: 'hosthome', //组件的名字
        data() {
            return { //数据
                msg: 'test router2.0',
                //  bottomNav: 'roomlist'
            }
        },
        methods: { //方法
            ...mapMutations(['sethostbottomNav']),
            handleChange(val) { //点击底部的变化
                this.sethostbottomNav(val)
                    //  this.bottomNav = val
                if (val == 'roomlist') {
                    this.$router.push({
                        path: '/host'
                    })
                } else if (val == 'forwardRoom') {

                    this.$router.push({
                        path: '/forwardRoom'
                    })
                } else if (val == 'myself') {

                    this.$router.push({
                        path: '/hostmyself'
                    })
                }
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['hostbottomNav']),
        },
        mounted: function() { //组件加载完成

        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件



        },
        components: { //加载子组件

        }
    }
</script>
<style scoped>
    .isact {
        background-color: black !important;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->